<script setup></script>

<template>
  <div class="gender">
    <div>性别分布</div>
    <div>
      <div>
        <div><el-image src="image/men.jpg" /></div>
        <div class="statistics">
          <div>男</div>
          <div class="total">99,999人</div>
          <div class="percentage">58.12%</div>
        </div>
      </div>
      <div>
        <div><el-image src="image/women.jpg" /></div>
        <div class="statistics">
          <div>女</div>
          <div class="total">99,999人</div>
          <div class="percentage">41.88%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.gender {
  min-width: 460px;
  height: 190px;
  background: var(--vt-c-white);
  margin: 0 12px 12px 0;
  padding: 20px;
  font-size: 12px;

  > div:first-child {
    margin-bottom: 10px;
    font-size: 18px;
  }
  > div:last-child {
    display: flex;
    align-items: center;
    justify-content: left;

    > div {
      display: flex;
      align-items: top;
      justify-content: left;
      margin: 0 30px;

      .statistics {
        margin: 50px 0 0 10px;

        .total {
          margin-top: 5px;
        }
        .percentage {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
